<template>
<div class="tw-appcustombox">
  <el-row>
    <el-col :span="16">
      <div class="tw-appcustombox-left">
        <div class="tw-appcustombox-left-iconbox">
          <img v-if="appData.logoUrl" :src="appData.logoUrl.startsWith('http') ? appData.logoUrl : `${$twApp.gateway}/fs/media${appData.logoUrl}`">
          <img v-else src="@assets/app-default.png">
        </div>
        <div class="tw-appcustombox-left-innerbox">
          <div class="xtitle">
            <p>{{appData.appName}}</p>
            <a @click="otherApp('举报')"><i class="icon-evalute"></i>举报</a>
            <a @click="otherApp('评价')"><i class="icon-tips-off"></i>评价</a>
          </div>
          <div class="xlabel">
            <span v-if="!appData.isCharge || appData.isCharge === '1'" class="tw-label-free">免费</span>
            <span v-else class="tw-label-free xcolor">付费</span>
            <span v-if="appData.appLvl" class="tw-label-icon xnational">{{appData.appLvl}}</span>
          </div>
          <div class="xtips">
            <span>适合人群: {{appData.personScope}}</span>
            <span>应用分类: {{appData.appClassification}}</span>
            <span>应用提供商: {{appData.providerName}}</span>
            <span>适用级别: {{appData.appLvl}}</span>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="tw-appcustombox-right">
        <a @click="otherApp('应用')" class="xbtn">进入应用</a>
      </div>
    </el-col>
  </el-row>
  <div class="tw-app-summary">
    <div class="tw-app-summary-nav">
      <h4>国家公共应用声明</h4>
      <p>国家公共资源应用，是平台依据教育部中央电化教育馆国家教育资源公共服务平台（以下简称国家平台）的有关规定，从国家平台引入的一批公共应用，平台对上述应用只展示和引用，最终的应用管理、维护、升级和测试审核等，由国家平台负责。</p>
    </div>
    <div class="tw-app-summary-nav">
      <h4>应用介绍</h4>
      <p>{{appData.appDesc}}</p>
    </div>
  </div>
</div>
</template>

<script>
import props from './props'

export default {
  name: 'table',

  props,

  data() {
    return {
      appData: {},
      infos: {}
    }
  },

  computed: {

    style () {
      return {
        widthBg: this.widthBg,
        colorBg: this.colorBg,
        borderBg: this.borderBg,
        paddingBg: this.paddingBg,
        titleSize: this.titleSize
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root.tw-appcustombox {
          width: ${this.widthBg};
          background-color: ${this.colorBg};
          border: 1px solid ${this.borderBg};
          padding: ${this.paddingBg}
        }

        ::root .tw-appcustombox-left-innerbox .xtitle > p {
          font-size: ${this.titleSize}
        }
      `
      this.addStyle(style)
    },

    addStyle (style) {
      this.$el.classList.add(`x${this._uid}`)
      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/::root/gm, `.x${this._uid}`).replace(/\n/gm, '')

      document.head.appendChild(styleEl)
    },

    // 获取当前应用详情
    getAppDetails () {
      window.axios.post(`${window.$twApp.gateway}/openapi-nationalresource/application/getAppDetails`,
        { appId: this.$ui.urlQuery.appId, accessToken: this.$ui.urlQuery.accessToken }).then(resp => {
        if (resp.data && resp.data.responseEntity) {
          this.appData = resp.data.responseEntity
        }
      })
    },

    // 跳转进入不同第三方地址
    otherApp (types) {
      // 调用获取票据接口判断
      window.axios.post(`${window.$twApp.gateway}/openapi-nationalresource/application/validateCertification`,
        { userId: this.$twApp.user.userId, loginName: this.$twApp.user.loginName })
        .then(resp => {
          if (resp.data && resp.data.responseEntity) {
            if (types === '应用') {
              window.axios.post(`${window.$twApp.gateway}/openapi-nationalresource/application/createTicket`,
                { accessToken: resp.data.responseEntity.accessToken, usessionId: resp.data.responseEntity.usessionId })
                .then(info => {
                  if (info.data && info.data.responseEntity) {
                    this.infos = info.data.responseEntity
                    window.open(`${'http://system.eduyun.cn:80/bmp-web/application?appId=' + this.$ui.urlQuery.appId + '&ticket=' + this.infos.ticket + '&sysCode=' + this.infos.sysCode}`)
                  }
                })
            } else if (types === '举报') {
              window.open(`${'http://system.eduyun.cn/bmp-web/sysAppReport/appReport?appId=' + this.$ui.urlQuery.appId + '&param=' + resp.data.responseEntity.usessionId}`)
            } else if (types === '评价') {
              window.open(`${'http://system.eduyun.cn/bmp-web/getSpAppDetail_index?appId=' + this.$ui.urlQuery.appId + '&param=' + resp.data.responseEntity.usessionId}`)
            }
          }
        })
    }
  },

  created () {
    // 进入后直接获取详情页信息
    this.getAppDetails()
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
